<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水果超市销售管理系统数据接口说明</title>
    <script src="../static/js/jquery-1.11.3.min.js"></script>
    <style>
        table {
            width: 100%;
        }
        tr {
        }
        .url_c {
            text-align: center;
        }
        .data_c {
        }
    </style>
</head>
<body>
<h1 style="text-align: center">水果网上超市销售管理系统数据接口说明</h1>
<p>卖场请求参数：<b>market_name</b> =
<select style="background-color: rgba(0,0,0,0);border: 1px solid #cccc;height: 40px; width: 150px;outline: none" id="marketSelect">

</select>
</p>
<table border="1">
    <tr>
        <th class="url_c">任务数据接口调用URL</th>
        <th class="data_c" >任务数据参考内容</th>
    </tr>
    <tr>
        <td class="url_c"><a href="/task1">task1</a></td>
        <td class="data_c"><span id="task1"></span></td>
    </tr>
    <tr>
        <td class="url_c"><a href="/task1b">task1b</a></td>
        <td class="data_c"><span id="task1b"></span></td>
    </tr>
    <tr>
        <td class="url_c"><a href="/task2">/task2</a></td>
        <td class="data_c"><span id="task2"></span></td>
    </tr>
    <tr>
        <td class="url_c"><a href="/task3">/task3</a></td>
        <td class="data_c"><span id="task3"></span></td>
    </tr>
    <tr>
        <td class="url_c"><a href="/task3b">/task3b</a></td>
        <td class="data_c"><span id="task3b"></span></td>
    </tr>
    <tr>
        <td class="url_c"><a href="/task4">/task4</a></td>
        <td class="data_c"><span id="task4"></span></td>
    </tr>
    <tr>
        <td class="url_c"><a href="/task5">/task5</a></td>
        <td class="data_c"><span id="task5"></span></td>
    </tr>
    <tr>
        <td class="url_c"><a href="/task6">/task6</a></td>
        <td class="data_c"><span id="task6"></span></td>
    </tr>
    <tr>
        <td class="url_c"><a href="/task6b">/task6b</a></td>
        <td class="data_c"><span id="task6b"></span></td>
    </tr>
    <tr>
        <td class="url_c"><a href="/task7">/task7</a></td>
        <td class="data_c"><span id="task7"></span></td>
    </tr>
    <tr>
        <td class="url_c"><a href="/task8">/task8</a></td>
        <td class="data_c"><span id="task8"></span></td>
    </tr>
</table>

<script type="text/javascript">

    $.ajax({
        type: 'get',
        url: '/get_market_names',  // 替换为API端点地址
        dataType: "json",
        success: function (data) {
            // 获取到market_name数组
            var market_name = data;
            // 获取market_name数组长度
            var market_name_length = market_name.length;

            // 获取select元素
            var select_element = document.getElementById('marketSelect');

            // 遍历market_name数组
            for (var i = 0; i < market_name_length; i++) {
                // 创建option标签
                var option = document.createElement('option');
                // 设置选项的值为market_name数组中的值
                option.value = market_name[i];
                // 设置选项显示的文本为market_name数组中的值
                option.text = market_name[i];
                // 将创建的option标签添加到select元素中
                select_element.appendChild(option);
            }
    },
    error: function (err) {
        console.log(err);
    }
})

    // 默认触发一次


    // 监听页面加载事件，当页面加载完毕后执行
    document.addEventListener('DOMContentLoaded', function() {
        var selectedMarket = '华联生鲜超市'


    // 获取select元素
        var selectElement = document.getElementById('marketSelect');
        // 获取当前选中的市场名称
        function fetchData(selectedMarket) {
            {# ------------------------------------ /task1 ----------------------------------- #}
            // 发起AJAX请求获取相应市场的数据
            $.ajax({
                type: 'post',
                url: '/task1/marketName=' + selectedMarket, // 替换API端点地址
                data: {market_name: selectedMarket}, // 发送选中的市场名称作为参数
                dataType: "json",
                success: function (data) {
                    // 在这里处理获取到的数据，例如更新页面内容
                    console.log(data);
                    str_pretty1 = "";
                    for (var key in data) {
                        str_pretty1 = str_pretty1 + JSON.stringify(key) + "数据" + "\n";
                        str_pretty1 = str_pretty1 + JSON.stringify(data[key], 2);
                        str_pretty1 = str_pretty1 + "\n";
                        document.getElementById('task1').innerText = str_pretty1;
                    }

                },
                error: function (err) {
                    console.log(err);
                }

            });
            {# ------------------------------------ /task1b ----------------------------------- #}
            $.ajax({
                type: 'post',
                url: '/task1b/marketName=' + selectedMarket, // 替换API端点地址
                data: {market_name: selectedMarket}, // 发送选中的市场名称作为参数
                dataType: "json",
                success: function (data) {
                    // 在这里处理获取到的数据，例如更新页面内容
                    console.log(data);
                    str_pretty1 = "";
                    for (var key in data) {
                        str_pretty1 = str_pretty1 + JSON.stringify(key) + "数据" + "\n";
                        str_pretty1 = str_pretty1 + JSON.stringify(data[key], 2);
                        str_pretty1 = str_pretty1 + "\n";
                        document.getElementById('task1b').innerText = str_pretty1;
                    }

                },
                error: function (err) {
                    console.log(err);
                }

            });
            {# ------------------------------------ /task2 ----------------------------------- #}
            $.ajax({
                type: 'post',
                url: '/task2/marketName=' + selectedMarket, // 替换API端点地址
                data: {market_name: selectedMarket}, // 发送选中的市场名称作为参数
                dataType: "json",
                success: function (data) {
                    // 在这里处理获取到的数据，例如更新页面内容
                    console.log(data);
                    str_pretty1 = "";
                    for (var key in data) {
                        str_pretty1 = str_pretty1 + JSON.stringify(key) + "数据" + "\n";
                        str_pretty1 = str_pretty1 + JSON.stringify(data[key], 2);
                        str_pretty1 = str_pretty1 + "\n";
                        document.getElementById('task2').innerText = str_pretty1;
                    }

                },
                error: function (err) {
                    console.log(err);
                }

            });

            {# ------------------------------------ /task3 ----------------------------------- #}
            $.ajax({
                type: 'post',
                url: '/task3/marketName=' + selectedMarket, // 替换API端点地址
                data: {market_name: selectedMarket}, // 发送选中的市场名称作为参数
                dataType: "json",
                success: function (data) {
                    // 在这里处理获取到的数据，例如更新页面内容
                    console.log(data);
                    str_pretty1 = "";
                    for (var key in data) {
                        str_pretty1 = str_pretty1 + JSON.stringify(key) + "数据" + "\n";
                        str_pretty1 = str_pretty1 + JSON.stringify(data[key], 2);
                        str_pretty1 = str_pretty1 + "\n";
                        document.getElementById('task3').innerText = str_pretty1;
                    }

                },
                error: function (err) {
                    console.log(err);
                }

            });
            {# ------------------------------------ /task3b ----------------------------------- #}
            $.ajax({
                type: 'post',
                url: '/task3b/marketName=' + selectedMarket, // 替换API端点地址
                data: {market_name: selectedMarket}, // 发送选中的市场名称作为参数
                dataType: "json",
                success: function (data) {
                    // 在这里处理获取到的数据，例如更新页面内容
                    console.log(data);
                    str_pretty1 = "";
                    for (var key in data) {
                        str_pretty1 = str_pretty1 + JSON.stringify(key) + "数据" + "\n";
                        str_pretty1 = str_pretty1 + JSON.stringify(data[key], 2);
                        str_pretty1 = str_pretty1 + "\n";
                        document.getElementById('task3b').innerText = str_pretty1;
                    }

                },
                error: function (err) {
                    console.log(err);
                }

            });
            {# ------------------------------------ /task4 ----------------------------------- #}
            $.ajax({
                type: 'post',
                url: '/task4/marketName=' + selectedMarket, // 替换API端点地址
                data: {market_name: selectedMarket}, // 发送选中的市场名称作为参数
                dataType: "json",
                success: function (data) {
                    // 在这里处理获取到的数据，例如更新页面内容
                    console.log(data);
                    str_pretty1 = "";
                    for (var key in data) {
                        str_pretty1 = str_pretty1 + JSON.stringify(key) + "数据" + "\n";
                        str_pretty1 = str_pretty1 + JSON.stringify(data[key], 2);
                        str_pretty1 = str_pretty1 + "\n";
                        document.getElementById('task4').innerText = str_pretty1;
                    }

                },
                error: function (err) {
                    console.log(err);
                }

            });
            {# ------------------------------------ /taks5 ----------------------------------- #}
            $.ajax({
                type: 'post',
                url: '/task5/marketName=' + selectedMarket, // 替换API端点地址
                data: {market_name: selectedMarket}, // 发送选中的市场名称作为参数
                dataType: "json",
                success: function (data) {
                    // 在这里处理获取到的数据，例如更新页面内容
                    console.log(data);
                    str_pretty1 = "";
                    for (var key in data) {
                        str_pretty1 = str_pretty1 + JSON.stringify(key) + "数据" + "\n";
                        str_pretty1 = str_pretty1 + JSON.stringify(data[key], 2);
                        str_pretty1 = str_pretty1 + "\n";
                        document.getElementById('task5').innerText = str_pretty1;
                    }

                },
                error: function (err) {
                    console.log(err);
                }

            });
            {# ------------------------------------ /taks6 ----------------------------------- #}
            $.ajax({
                type: 'post',
                url: '/task6/marketName=' + selectedMarket, // 替换API端点地址
                data: {market_name: selectedMarket}, // 发送选中的市场名称作为参数
                dataType: "json",
                success: function (data) {
                    // 在这里处理获取到的数据，例如更新页面内容
                    console.log(data);
                    str_pretty1 = "";
                    for (var key in data) {
                        str_pretty1 = str_pretty1 + JSON.stringify(key) + "数据" + "\n";
                        str_pretty1 = str_pretty1 + JSON.stringify(data[key], 2);
                        str_pretty1 = str_pretty1 + "\n";
                        document.getElementById('task6').innerText = str_pretty1;
                    }

                },
                error: function (err) {
                    console.log(err);
                }

            });
            {# ------------------------------------ /taks7 ----------------------------------- #}
            $.ajax({
                type: 'post',
                url: '/task7/marketName=' + selectedMarket, // 替换API端点地址
                data: {market_name: selectedMarket}, // 发送选中的市场名称作为参数
                dataType: "json",
                success: function (data) {
                    // 在这里处理获取到的数据，例如更新页面内容
                    str_pretty1 = "";
                    for (var key in data) {
                        str_pretty1 = str_pretty1 + JSON.stringify(key) + "数据" + "\n";
                        str_pretty1 = str_pretty1 + JSON.stringify(data[key], 2);
                        str_pretty1 = str_pretty1 + "\n";
                        document.getElementById('task7').innerText = str_pretty1;
                    }

                },
                error: function (err) {
                    console.log(err);
                }

            });
            {# ------------------------------------ /taks8 ----------------------------------- #}
            $.ajax({
                type: 'post',
                url: '/task8/marketName=' + selectedMarket, // 替换API端点地址
                data: {market_name: selectedMarket}, // 发送选中的市场名称作为参数
                dataType: "json",
                success: function (data) {
                    // 在这里处理获取到的数据，例如更新页面内容
                    console.log(data);
                    str_pretty1 = "";
                    for (var key in data) {
                        str_pretty1 = str_pretty1 + JSON.stringify(key) + "数据" + "\n";
                        str_pretty1 = str_pretty1 + JSON.stringify(data[key], 2);
                        str_pretty1 = str_pretty1 + "\n";
                        document.getElementById('task8').innerText = str_pretty1;
                    }

                },
                error: function (err) {
                    console.log(err);
                }

            });

        }
        selectElement.addEventListener('change', function() {
            selectedMarket = this.value;
            const a_element = document.querySelectorAll('.url_c a')
            a_element.forEach(function (aTag) {
                aTag.href = aTag.innerText
                aTag.href = aTag.href + '/marketName=' + selectedMarket
            })
                // 发起AJAX请求获取相应市场的数据
            fetchData(selectedMarket);
    });
        // 默认为华联生鲜超市
        fetchData(selectedMarket)
        $('.url_c a').click(function() {
            this.href = this.innerText;
            // 构建 URL，并将参数添加到 URL 中
            this.href = this.href + '/marketName=' + selectedMarket;

});

});
</script>
</body>
</html>